<template>
  <el-dialog
    top="30px"
    width="900px"
    append-to-body
    title="编辑民宿经营信息"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <table class="table table-bordered table-sm bg-white table-vertical-middle text-center">
      <colgroup>
        <col width="12%" />
        <col width="20%" />
        <col width="12%" />
        <col width="24%" />
        <col width="12%" />
        <col width="20%" />
      </colgroup>
      <tr>
        <td>民宿位置</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.address"
            class="text-center"
            placeholder="输入民宿位置"
          ></el-input>
        </td>
        <td>民宿区域位置</td>
        <td class="report-input-td">
          <c-select
            class="w-100"
            placeholder="民宿区域位置"
            :options="enumAreaPosType"
            v-model="hotel.area_pos_type"
          ></c-select>
        </td>

        <td>经营场所是否自有</td>
        <td class="report-input-td">
          <c-select
            class="w-100"
            placeholder="经营场所是否自有"
            :options="enumBusPlaceType"
            v-model="hotel.bus_place_type"
          ></c-select>
        </td>
      </tr>
      <tr>
        <td>周边自然景观资源</td>
        <td colspan="3" class="report-input-td">
          <c-select
            class="w-100"
            placeholder="民宿区域位置"
            :options="enumLandResourceType"
            v-model="hotel.land_resource_type"
          ></c-select>
        </td>
        <td>客房总数</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.house_total"
            placeholder="客房总数"
            v-input-number="{ min: 0, fixed: 0 }"
          >
            <span slot="append">间</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td>民宿经营期限</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.bussiness_months"
            placeholder="经营期限"
            v-input-number="{ min: 0, fixed: 0 }"
          >
            <span slot="append">月</span>
          </el-input>
        </td>
        <td>用工人数</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.emp_total"
            placeholder="用工人数"
            v-input-number="{ min: 0, fixed: 0 }"
          >
            <span slot="append">人</span>
          </el-input>
        </td>
        <td>近一年人工支出</td>
        <td class="report-input-td">
          <el-input v-model="hotel.emp_pay" placeholder="emp_pay" v-input-number="{ min: 0 }">
            <span slot="append">万元</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td>占地面积</td>
        <td class="report-input-td">
          <el-input v-model="hotel.area_covered" placeholder="占地面积" v-input-number="{ min: 0 }">
            <span slot="append">㎡</span>
          </el-input>
        </td>
        <td>建筑面积</td>
        <td class="report-input-td">
          <el-input v-model="hotel.area_build" placeholder="占地面积" v-input-number="{ min: 0 }">
            <span slot="append">㎡</span>
          </el-input>
        </td>
        <td>年销售收入</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.sale_income"
            placeholder="年销售收入(近5年)"
            v-input-number="{ min: 0 }"
          >
            <span slot="append">万元</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td>年经营成本</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.business_cost"
            placeholder="年经营成本(近5年)"
            v-input-number="{ min: 0 }"
          >
            <span slot="append">万元</span>
          </el-input>
        </td>
        <td>每月月入住率</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.in_house_rate"
            placeholder="入住率(近12个月)"
            v-input-number="{ min: 0, max: 100 }"
          >
            <span slot="append">%</span>
          </el-input>
        </td>
        <td>每月平均客房定价</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.house_price"
            placeholder="客房定价(近12个月)"
            v-input-number="{ min: 0, max: 100 }"
          >
            <span slot="append">元</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td>内部环境照片</td>
        <td colspan="5" class="report-input-td text-left">
          <div class="mt-3 ml-3">
            <upload-oss
              multiple
              listType="picture-card"
              :is-delete="false"
              ref="upload"
              :file-name="1"
              accept="image/*"
              :dir="uploadURL"
              :on-complete="handleComplete"
              :on-remove="handleRemove"
              :on-error="onError"
              :file-list="fileList"
            ></upload-oss>
          </div>
        </td>
      </tr>
      <tr>
        <td>外部环境照片</td>
        <td colspan="5" class="report-input-td text-left">
          <div class="mt-3 ml-3">
            <upload-oss
              multiple
              listType="picture-card"
              :is-delete="false"
              ref="upload2"
              :file-name="1"
              accept="image/*"
              :dir="uploadURL"
              :on-complete="handleComplete2"
              :on-remove="handleRemove"
              :on-error="onError"
              :file-list="fileList2"
            ></upload-oss>
          </div>
        </td>
      </tr>

      <tr>
        <td>备注</td>
        <td colspan="5" class="report-input-td">
          <el-input type="textarea" v-model="hotel.remark" placeholder="备注" :rows="3"></el-input>
        </td>
      </tr>
    </table>
    <div class="text-center mt-5">
      <el-button type="primary" class="btn-long" :loading="saveLoading" @click="handleSubmit">
        提交
      </el-button>
      <el-button class="btn-long" :loading="saveLoading" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  enumAreaPosType,
  enumBusPlaceType,
  enumLandResourceType,
} from '@/bigcredit/views/program/components/apply/ApplyTable'
import { strFromOss } from '@/common/plugins/tools/format'
import { arrayFromString } from '@vimi/utils-tool'
import { deleteOss } from '@/common/api/oss'
export default {
  components: {},
  props: {
    visible: Boolean,
    queryId: String,
    formData: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      enumAreaPosType,
      enumBusPlaceType,
      enumLandResourceType,
      hotel: {},
      hotelTable: 'credit_industrial_hotel_invest',
      saveLoading: false,
      fileList: [],
      deleteImages: [],
    }
  },
  computed: {
    uploadURL() {
      return `/attachment/hotel/pc_upload/${this.queryId}`
    },
  },
  watch: {
    formData: {
      handler: function () {
        this.hotel = { ...this.formData }
        this.deleteImages = []
        this.fileList = arrayFromString(this.formData.attachment_inner).map(url => {
          return { url }
        })
        this.fileList2 = arrayFromString(this.formData.attachment_outer).map(url => {
          return { url }
        })
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    onError(err) {
      this.$message.error(err?.errorMessage ?? '上传失败')
    },
    handleRemove(file) {
      // 只删除担保端上传的附件，客户申请的保留
      if (file.url.includes('pc_upload')) {
        this.deleteImages.push(file.url)
      }
    },
    handleComplete(images) {
      this.hotel.attachment_inner = strFromOss(images)
      this.$refs.upload2.submit()
    },
    handleComplete2(images) {
      this.hotel.attachment_outer = strFromOss(images)
      this.handleConfirm()
    },
    handleSubmit() {
      this.$refs.upload.submit()
    },
    handleConfirm() {
      if (!this.hotel.id) {
        return
      }
      this.saveLoading = true
      this.$api
        .updateData(this.$serviceName, this.hotelTable, this.hotel.id, this.hotel)
        .then(() => {
          deleteOss(this.deleteImages)
          this.deleteImages = []
          this.$message.success('保存成功')
          this.handlerSuccess()
          this.beforeClose()
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '保存失败，请重试！')
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handlerSuccess() {
      this.$emit('success', true)
    },
  },
}
</script>

<style lang="scss" scoped>
.report-input-td {
  background-color: #ffffee;
}
.table-vertical-middle td {
  vertical-align: middle;
}
</style>
